<template>
    <div>
        <div style="height: 98px;"></div>
        <div class="page" v-loading="loading">
            <div class="page_top">
                <div class="title">功能区</div>
                <div>
                    <div class="icon_list">
                        <div class="icon_item" @click="goIconInfo(item.path)" v-for="(item, index) in functional"
                            :key="index">
                            <img v-if="item.id != 25" :src="require(`@/assets/image/${item.img}.svg`)" alt="">
                            <img v-else style="width: 40px; height: 40px;" src="@/assets/image/car_company.png" alt="">
                            <span style="margin-top: 12px;font-size: 12px;">{{ item.name }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page_top">
                <div class="title">其他服务</div>
                <div>
                    <div class="icon_list">
                        <div class="icon_item" @click="services(item.path)" v-for="(item, index) in service"
                            :key="index">
                            <img :src="require(`@/assets/image/${item.img}.svg`)" alt="">
                            <span style="margin-top: 12px;font-size: 12px;">{{ item.name }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page_top">
                <div class="title">基础服务</div>
                <div>
                    <div class="icon_list">
                        <div class="icon_item" @click="goBaseIcon(item.path)" v-for="(item, index) in baseInfo"
                            :key="index">
                            <img v-if="item.img != 'baseInfo4' && item.img != 'baseInfo5'"
                                :src="require(`@/assets/image/${item.img}.svg`)" alt="">
                            <img v-else style="width: 40px; height: 40px;" src="@/assets/image/baseInfo4.png" alt="">
                            <span style="margin-top: 12px;font-size: 12px;">{{ item.name }}</span>
                        </div>
                        <!-- <div class="icon_item" @click="goFundPage()">
                            <img :src="require(`@/assets/image/baseInfo2.svg`)" alt="">
                            <span style="margin-top: 12px;font-size: 12px;">基金管理</span>
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="page_top">
                <div class="title">任务报表</div>
                <div>
                    <div class="icon_list">
                        <div class="icon_item" @click="dataReports(item.path)" v-for="(item, index) in dataReport"
                            :key="index">
                            <img :src="require(`@/assets/image/${item.img}.svg`)" alt="">
                            <span style="margin-top: 12px;font-size: 12px;">{{ item.name }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { indexMenus } from '@/api/api'
import { get } from 'js-cookie';
export default {
    data () {
        return {
            functional: [
                // { value: 1, img: 'functional1', name: '企业管理' },
                // { value: 2, img: 'functional2', name: '接单人管理' },
                // { value: 3, img: 'functional3', name: '发布管理' },
                // { value: 4, img: 'functional4', name: '订单管理' },
                // { value: 5, img: 'functional5', name: '对账管理' },
                // { value: 6, img: 'functional6', name: '付款管理' },
                // { value: 7, img: 'functional7', name: '收款管理' },
                // { value: 8, img: 'functional8', name: '发票管理' },
            ],
            service: [
                // { value: 1, img: 'service1', name: '报关管理' },
                // { value: 2, img: 'service2', name: '押箱服务' },
            ],
            baseInfo: [
                // { value: 1, img: 'baseInfo1', name: '场站管理' },
                // { value: 2, img: 'baseInfo2', name: '运费管理' },
                // { value: 3, img: 'baseInfo3', name: '用户管理' },
            ],
            dataReport: [],
            loading: false,
        }
    },
    created () {
        this.getMenusCard()
    },
    methods: {
        getMenusCard () {
            this.loading = true
            indexMenus().then(res => {
                // console.log('我是首页列表', res);
                if (res.status == 200) {
                    this.functional = res.data.functional
                    this.service = res.data.service
                    this.baseInfo = res.data.baseInfo
                    this.dataReport = res.data.dataReport
                    this.loading = false
                } else {
                    this.loading = false
                }
            }).catch(err => {
                this.loading = false
            })
        },
        goIconInfo (url) {
            if (url) {
                this.$router.push(`${url}`)
            } else {
                this.$alert('正在开发中···，敬请期待！', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {

                    }
                });
            }
        },
        goBaseIcon (url) {
            if (url) {
                this.$router.push(`${url}`)
            } else {
                this.$alert('正在开发中···，敬请期待！', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {

                    }
                });
            }
        },
        goFundPage () {
            this.$router.push('/fundPage')
        },
        goBaseIcons () {
            this.$router.push(`/refundPage`)
        },
        dataReports (url) {
            if (url) {
                this.$router.push(`${url}`)
            } else {
                this.$alert('正在开发中···，敬请期待！', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {

                    }
                });
            }
        },
        services (url) {
            if (url) {
                this.$router.push(`${url}`)
            } else {
                this.$alert('正在开发中···，敬请期待！', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {

                    }
                });
            }
        },
    },
}
</script>

<style scoped lang="scss">
.page {
    min-height: calc(102vh);
    padding: 16px 50px;
}

.title {
    color: rgb(29, 33, 41);
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 16px;
}

.icon_item {
    width: 112px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    /* 网页背景 */
    background: rgb(242, 243, 245);
    color: rgb(29, 33, 41);
    font-family: PingFang SC;
    font-size: 13px;
    font-weight: 500;
    margin-right: 30px;
    cursor: pointer;
}

.icon_list {
    display: flex;
}

.page_top {
    margin-bottom: 30px;
}
</style>